<!--<page-header title="绩效指标" [breadcrumb]="breadcrumb">-->
<!--<ng-template #breadcrumb>-->
<!--<ql-breadcrumb>-->
<!--<ql-breadcrumb-item>绩效管理</ql-breadcrumb-item>-->
<!--<ql-breadcrumb-item>绩效指标</ql-breadcrumb-item>-->
<!--</ql-breadcrumb>-->
<!--</ng-template>-->
<!--</page-header>-->

<!--<page-container>-->
<!--<ql-card >-->

<!--<div echarts [options]="option[0]" [merge]="option[1]" ]   ></div>-->

<!--</ql-card>-->
<!--</page-container>-->

<page-header title="绩效指标" [breadcrumb]="breadcrumb">
  <ng-template #breadcrumb>
    <ql-breadcrumb>
      <ql-breadcrumb-item>绩效管理</ql-breadcrumb-item>
      <ql-breadcrumb-item>绩效指标</ql-breadcrumb-item>
    </ql-breadcrumb>
  </ng-template>
</page-header>
<page-container>
  <ql-button-group>
    <ql-button [type]="content === tagUser ? 'primary' : ''" (click)="onChangeTab(tagUser)">综合创利排名</ql-button>
    <ql-button [type]="content === tagView ? 'primary' : ''" (click)="onChangeTab(tagView)">产品销售排名</ql-button>
    <ql-button [type]="content === tagFeature ? 'primary' : ''" (click)="onChangeTab(tagFeature)"
      >客户提升排名</ql-button
    >
    <ql-button [type]="content === tagInfo ? 'primary' : ''" (click)="onChangeTab(tagInfo)">营销任务排名</ql-button>
  </ql-button-group>
  <div class="ql-padding-y">
    <ng-container [ngTemplateOutlet]="content"></ng-container>
  </div>
  <ng-template #tagUser>
    <ql-card>
      <ng-template #header>
        <card-header title="员工排名">
          <ql-select [model]="markValue" (modelChange)="handle($event, '1')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay">
        <data-form>
          <ql-form-item label="机构类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="角色类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="员工姓名">
            <ql-input></ql-input>
          </ql-form-item>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
        </data-form>
        <data-table [model]="custList">
          <!--<ql-table-column model-key="rank" label="排名"> </ql-table-column>-->
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="custCode" label="员工号"> </ql-table-column>
          <ql-table-column model-key="custName" label="员工姓名"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="netProfits" label="净利润"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options[0]" [merge]="options[1]" *ngIf="!isdisplay"></div>
    </ql-card>
    <ql-card>
      <ng-template #header>
        <card-header title="机构排名">
          <ql-select [model]="markValue" (modelChange)="handle2($event, '1')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <!--<ql-card>-->
      <div *ngIf="isdisplay2">
        <data-form>
          <ql-form-item label="机构类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
        </data-form>
        <data-table [model]="orgList">
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="orgCode" label="机构代码"> </ql-table-column>
          <ql-table-column model-key="orgName" label="机构名称"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="netProfits" label="净利润"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options2[0]" [merge]="options2[1]" *ngIf="!isdisplay2"></div>
    </ql-card>
  </ng-template>

  <ng-template #tagView>
    <ql-card header="员工排名">
      <ng-template #header>
        <card-header title="员工排名">
          <ql-select [model]="markValue" (modelChange)="handle($event, '2')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay">
        <data-form>
          <ql-form-item label="机构类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="角色类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="员工姓名">
            <ql-input></ql-input>
          </ql-form-item>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="指标名称">
            <ql-select></ql-select>
          </ql-form-item>
        </data-form>
        <data-table [model]="custList">
          <!--<ql-table-column model-key="rank" label="排名"> </ql-table-column>-->
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="custCode" label="员工号"> </ql-table-column>
          <ql-table-column model-key="custName" label="员工姓名"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="saleCount" label="销售量"> </ql-table-column>
          <ql-table-column model-key="saleAmount" label="销售金额"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options[0]" [merge]="options[1]"  *ngIf="!isdisplay"></div>
    </ql-card>

    <ql-card>
      <ng-template #header>
        <card-header title="机构排名">
          <ql-select [model]="markValue" (modelChange)="handle2($event, '2')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay2">
        <data-form>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="指标名称">
            <ql-select></ql-select>
          </ql-form-item>
        </data-form>
        <data-table [model]="orgList">
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="orgCode" label="机构代码"> </ql-table-column>
          <ql-table-column model-key="orgName" label="机构名称"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="saleCount" label="销售量"> </ql-table-column>
          <ql-table-column model-key="saleAmount" label="销售金额"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options2[0]" [merge]="options2[1]"  *ngIf="!isdisplay2"></div>
    </ql-card>
  </ng-template>

  <ng-template #tagFeature>
    <ql-card>
      <ng-template #header>
        <card-header title="员工排名">
          <ql-select [model]="markValue" (modelChange)="handle($event, '3')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay">
        <data-form>
          <ql-form-item label="机构类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="角色类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="员工姓名">
            <ql-input></ql-input>
          </ql-form-item>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="指标名称">
            <ql-select></ql-select>
          </ql-form-item>
        </data-form>
        <data-table [model]="custList">
          <!--<ql-table-column model-key="rank" label="排名"> </ql-table-column>-->
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="custCode" label="员工号"> </ql-table-column>
          <ql-table-column model-key="custName" label="员工姓名"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="levelCount" label="客户等级提升数"> </ql-table-column>
          <ql-table-column model-key="aumCount" label="管户客户AUM提升数"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options[0]" [merge]="options[1]"  *ngIf="!isdisplay"></div>
    </ql-card>
    <ql-card>
      <ng-template #header>
        <card-header title="机构排名">
          <ql-select [model]="markValue" (modelChange)="handle2($event, '3')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay2">
        <data-form>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="指标名称">
            <ql-select></ql-select>
          </ql-form-item>
        </data-form>
        <!--<ql-card>-->
        <data-table [model]="orgList">
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="orgCode" label="机构代码"> </ql-table-column>
          <ql-table-column model-key="orgName" label="机构名称"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="levelCount" label="客户等级提升数"> </ql-table-column>
          <ql-table-column model-key="aumCount" label="管户客户AUM提升数"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options2[0]" [merge]="options2[1]"  *ngIf="!isdisplay2"></div>
    </ql-card>
  </ng-template>

  <ng-template #tagInfo>
    <ql-card>
      <ng-template #header>
        <card-header title="员工排名">
          <ql-select [model]="markValue" (modelChange)="handle($event, '4')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay">
        <data-form>
          <ql-form-item label="机构类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="角色类别">
            <ql-select></ql-select>
          </ql-form-item>
          <ql-form-item label="员工姓名">
            <ql-input></ql-input>
          </ql-form-item>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
        </data-form>
        <data-table [model]="custList">
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="custCode" label="员工号"> </ql-table-column>
          <ql-table-column model-key="custName" label="员工姓名"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="taskCount" label="任务完成数"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options[0]" [merge]="options[1]"  *ngIf="!isdisplay"></div>
    </ql-card>
    <ql-card>
      <ng-template #header>
        <card-header title="机构排名">
          <ql-select [model]="markValue" (modelChange)="handle2($event, '4')">
            <ql-option label="表 格" value="00"></ql-option>
            <ql-option label="柱形图" value="11"></ql-option>
          </ql-select>
        </card-header>
      </ng-template>
      <div *ngIf="isdisplay2">
        <data-form>
          <ql-form-item label="开始时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
          <ql-form-item label="结束时间">
            <ql-date-picker></ql-date-picker>
          </ql-form-item>
        </data-form>
        <data-table [model]="orgList">
          <ql-table-column model-key="rank" label="排名"> </ql-table-column>
          <ql-table-column model-key="orgCode" label="机构代码"> </ql-table-column>
          <ql-table-column model-key="orgName" label="机构名称"> </ql-table-column>
          <ql-table-column model-key="startTime" label="开始时间"> </ql-table-column>
          <ql-table-column model-key="endTime" label="结束时间"></ql-table-column>
          <ql-table-column model-key="taskCount" label="任务完成数"> </ql-table-column>
        </data-table>
      </div>
      <div echarts [options]="options2[0]" [merge]="options2[1]"  *ngIf="!isdisplay2"></div>
    </ql-card>
  </ng-template>
</page-container>
